<template>
    <div class="app-container">
        <!--  搜索栏  -->
        <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="100px">
            <el-form-item label="字典名称" prop="name">
                <el-input v-model="queryParams.name" placeholder="请输入字典名称" clearable size="small"/>
            </el-form-item>
            <el-form-item label="字典编号" prop="code">
                <el-input v-model="queryParams.code" placeholder="请输入完整编号" clearable size="small"/>
            </el-form-item>
            <el-form-item style="margin-left: 10px;">
                <el-button type="primary" icon="el-icon-search" size="mini"  @click="initLevelTwodata">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" style="margin-left: 10px;"  @click="resetQuery" >重置</el-button>
            </el-form-item>
        </el-form>
        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleDictType">新增</el-button>
            </el-col>
            <right-toolbar :showSearch.sync="showSearch" @queryTable="initLevelTwodata"></right-toolbar>
        </el-row>

        <el-table v-loading="loading" :data="basicType.slice((currentPage-1)*pageSize,currentPage*pageSize)" max-height="580px" >
            <el-table-column align="center" type="index" label="序号" ></el-table-column>
            <el-table-column label="字典名称" align="center" prop="name"  />
            <el-table-column label="英文名" align="center" prop="enName"  />
            <el-table-column label="编号" align="center" prop="code" width="200" />
            <el-table-column label="创建时间" align="center" prop="creationDate" width="180">
                <template slot-scope="scope">
                    <span>{{ parseTime(scope.row.creationDate) }}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="140" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                    <el-button size="mini" type="text" icon="el-icon-edit"
                            @click="handleEdit(scope.row)"
                    >编辑</el-button>
                    <el-button size="mini" type="text" icon="el-icon-delete"
                            @click="onDelete(scope.row.id)"
                    >删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <pagination
                v-show="basicType.length>0"
                :total="basicType.length"
                :page.sync="currentPage"
                :limit.sync="pageSize"
        />

        <!-- 添加字典类型对象 -->
        <el-dialog :title="title" :visible.sync="open" v-if="open" width="30%" append-to-body>
            <dict-type-form :dictTypeForm="dictTypeForm"  @submitForm="initLevelTwodata" @cancelDialog="cancel"></dict-type-form>
        </el-dialog>

    </div>
</template>

<script>
    import {getLevelTwoType, deleteLevelTwoType, searchmain} from '@/api/basicdata/basictype'
    import dictTypeForm from "./form/dictTypeForm";
    export default {
        name: "dictType",
        props: {
            activeName: String,
        },
        components: {
            dictTypeForm,
        },
        data() {
            return {
                // 遮罩层
                loading: false,
                // 显示搜索条件
                showSearch: true,
                // 弹出层标题
                title: "",
                // 是否显示弹出层
                open: false,
                // 分页
                currentPage: 1,
                currentIndex: '',
                pageSize: 10,
                // 查询参数
                queryParams: {
                    name: undefined,
                    code: undefined,
                    typeId: undefined,
                    pcode: '0',
                },
                // 字典类型
                basicType: [],
                // 字典表单
                dictTypeForm:{
                    code: '',
                    name: '',
                    enName: '',
                    pcode: '0',
                    typeId: undefined,
                    status: '1',
                    id: undefined
                },


            }
        },
        created() {
            // 初始化业务对象ID
            this.queryParams.typeId = this.activeName;
            this.dictTypeForm.typeId = this.activeName;

            // 初始化二级字典类型
            this.initLevelTwodata();
        },
        methods: {

            /** 获取字典类型 */
            initLevelTwodata() {
                this.loading = true
                const data = {
                    'searchParams': this.queryParams
                }
                getLevelTwoType(data).then(res => {
                    this.basicType = res.responseBody.result
                    // 更新表单业务对象typeId
                    this.dictTypeForm.typeId = this.queryParams.typeId;
                    this.loading = false
                })
            },

            /** 新增业务对象按钮操作 */
            handleDictType() {
                this.open = true;
                this.title = "添加字典类型";
            },

            /** 修改业务对象按钮操作 */
            handleEdit(row) {
                this.dictTypeForm.id = row.id
                this.dictTypeForm.code = row.code
                this.dictTypeForm.enName = row.enName
                this.dictTypeForm.name = row.name
                this.open = true;
                this.title = "编辑字典类型";
            },

            /** 删除按钮操作 */
            onDelete(id) {
                this.$confirm('业务对象较为基础，不建议进行删除！如需删除请点确定按键！?', "警告", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(function() {
                    return deleteLevelTwoType(id);
                }).then(res => {
                    if (res.retCode === '200') {
                        this.$message.success('删除成功')
                        this.initLevelTwodata();
                    } else {
                        // console.log(res)
                        this.$message.error('删除失败' + res.retCode)
                    }
                })
            },

            /** 重置按钮操作 */
            resetQuery() {
                this.resetForm("queryForm");
                this.initLevelTwodata();
            },

            // 取消按钮
            cancel() {
                this.open = false;
                this.title = '';
                this.dictTypeForm.id = undefined;
                this.dictTypeForm.code = '';
                this.dictTypeForm.name = '';
                this.dictTypeForm.enName = '';
            },
        }
    }


</script>
